<script setup lang="ts">
import {onBeforeMount, ref} from 'vue'
import Phones from '@components/Phones'
import {FormInst, useMessage} from 'naive-ui';
import ImgContent from "@components/ImgContent/index.ts";
import {Config} from "@/config";
import {getRequest, postPutRequest} from '@/api/data'

const message = useMessage()
const settingFormRef = ref<FormInst | null>(null);
const showImgContent = ref<boolean>(false);
const pages = ref<HTMLElement | null | any>(null);
const settingForm = ref({
  title: '分销海报',
  poster: null,
  is_full: 1,
  width: 200,
  height: 200,
  border_top_left: 0,
  border_top_right: 0,
  border_bottom_left: 0,
  border_bottom_right: 0,
  qrcode: {
    width: 80,
    height: 80,
    x: 0,
    y: 0,
    left: 0,
    top: 0,
    border_top_left: 0,
    border_top_right: 0,
    border_bottom_left: 0,
    border_bottom_right: 0,
  }
})
//选择海报
const selectedImg = (img: Array<{ src: string | any }>) => {
  settingForm.value.poster = img[0].src
}
//二维码X轴位置
const qrcodePositionX = () => {
  const width = pages.value.offsetWidth;
  const q_w: number = settingForm.value.qrcode.width;
  const full_width = parseInt(String(Number(q_w / width.toFixed(2)) * 100));
  const x = (100 - full_width) / 100;//总长度
  settingForm.value.qrcode.left = x * settingForm.value.qrcode.x
}
//二维码Y轴位置
const qrcodePositionY = () => {
  const height = pages.value.offsetHeight;
  const q_w: number = settingForm.value.qrcode.height;
  const full_height = parseInt(String(Number(q_w / height.toFixed(2)) * 100));
  const y = (100 - full_height) / 100;//总长度
  settingForm.value.qrcode.top = y * settingForm.value.qrcode.y
}
//重置配置
const resetSettings=()=>{
  settingForm.value.poster=null;
  settingForm.value.is_full=1;
  settingForm.value.width=200;
  settingForm.value.height=200;
  settingForm.value.border_top_left=0;
  settingForm.value.border_top_right=0;
  settingForm.value.border_bottom_left=0;
  settingForm.value.border_bottom_right=0;
  settingForm.value.qrcode.width=80;
  settingForm.value.qrcode.height=80;
  settingForm.value.qrcode.x=0;
  settingForm.value.qrcode.y=0;
  settingForm.value.qrcode.left=0;
  settingForm.value.qrcode.top=0;
  settingForm.value.qrcode.border_top_left=0;
  settingForm.value.qrcode.border_top_right=0;
  settingForm.value.qrcode.border_bottom_left=0;
  settingForm.value.qrcode.border_bottom_right=0;
}
//提交配置
const handleSubmit = () => {
  postPutRequest('conf/dist_page',{value:JSON.stringify(settingForm.value)}).then((result:ResponseResult) => {
    if (result.code === 200) {
      message.success(result.message, {
        duration: 1500,
      })
    } else {
      message.error(result.message);
    }
  })
}
const getOptions=async ()=>{
  await getRequest('conf/dist_page').then((result:ResponseResult) => {
    const {data}=result;
    if(data){
      settingForm.value=JSON.parse(data)
    }
  })
}
onBeforeMount(()=>{
  getOptions();
})

</script>

<template>
  <n-grid x-gap="12" :cols="4">
    <n-gi style="width: 385px;">
      <n-card :bordered="false" title="自定义分销海报"     :segmented="{
      content: true,
      footer: 'soft'
    }">
        <n-form ref="settingFormRef" :model="settingForm">
<!--          <n-form-item label="标题：" path="title" :show-feedback="false">-->
<!--            <n-input v-model:value="settingForm.title" placeholder="分销页标题" clearable/>-->
<!--          </n-form-item>-->
          <n-space style="padding-bottom: 10px;padding-left: 5px;">
            <n-button @click="()=>(showImgContent=true)">{{settingForm.poster!=null?'更换海报':'选择海报'}}</n-button>
            <n-button v-if="settingForm.poster" type="error" @click="()=>(settingForm.poster=null)">X</n-button>
          </n-space>
          <div style="display: flex !important;align-items: center;height: 32px;padding-bottom: 10px;padding-left: 5px;">
            <n-radio-group v-model:value="settingForm.is_full" name="radiogroup">
              <n-space>
                <n-radio :value="0" label="居中"/>
                <n-radio :value="1" label="全屏"/>
              </n-space>
            </n-radio-group>
          </div>
          <n-form-item v-if="!settingForm.is_full" label="海报宽高：" path="width">
            <div style="width: 100%" class="input-numbers">
              <div>
                宽度
                <n-input-number v-model:value="settingForm.width" :min="0" :precision="0" class="input-numbers-input"
                                clearable/>
              </div>
              <div>
                高度
                <n-input-number v-model:value="settingForm.height" :min="0" :precision="0" class="input-numbers-input"
                                clearable/>
              </div>
            </div>
          </n-form-item>
          <n-form-item v-if="!settingForm.is_full" label="海报边角半径：">
            <div style="width: 100%">
              <div class="input-numbers">
                <div>
                  左上
                  <n-input-number v-model:value="settingForm.border_top_left" :min="0" :precision="0"
                                  class="input-numbers-input"/>
                </div>
                <div>
                  右上
                  <n-input-number v-model:value="settingForm.border_top_right" :min="0" :precision="0"
                                  class="input-numbers-input"/>
                </div>
              </div>
            </div>
            <div style="width: 100%">
              <div class="input-numbers">
                <div>
                  右下
                  <n-input-number v-model:value="settingForm.border_bottom_right" :min="0" :precision="0"
                                  class="input-numbers-input"/>
                </div>
                <div>
                  左下
                  <n-input-number v-model:value="settingForm.border_bottom_left" :min="0" :precision="0"
                                  class="input-numbers-input"/>
                </div>
              </div>
            </div>
          </n-form-item>
          <n-form-item label="二维码宽高：" path="width">
            <div style="width: 100%" class="input-numbers">
              <div>
                宽度
                <n-input-number v-model:value="settingForm.qrcode.width" :min="0" class="input-numbers-input"
                                clearable/>
              </div>
              <div>
                高度
                <n-input-number v-model:value="settingForm.qrcode.height" :min="0" class="input-numbers-input"
                                clearable/>
              </div>
            </div>
          </n-form-item>
          <n-form-item  label="二维码边角半径：">
            <div style="width: 100%">
              <div class="input-numbers">
                <div>
                  左上
                  <n-input-number v-model:value="settingForm.qrcode.border_top_left" :min="0" :precision="0"
                                  class="input-numbers-input"/>
                </div>
                <div>
                  右上
                  <n-input-number v-model:value="settingForm.qrcode.border_top_right" :min="0" :precision="0"
                                  class="input-numbers-input"/>
                </div>
              </div>
            </div>
            <div style="width: 100%">
              <div class="input-numbers">
                <div>
                  右下
                  <n-input-number v-model:value="settingForm.qrcode.border_bottom_right" :min="0" :precision="0"
                                  class="input-numbers-input"/>
                </div>
                <div>
                  左下
                  <n-input-number v-model:value="settingForm.qrcode.border_bottom_left" :min="0" :precision="0"
                                  class="input-numbers-input"/>
                </div>
              </div>
            </div>
          </n-form-item>
          <n-form-item label="二维码位置X轴：" path="height" :show-feedback="false">
            <n-slider v-model:value="settingForm.qrcode.x" @dragend="qrcodePositionX"/>
          </n-form-item>
          <n-form-item label="二维码位置Y轴：" path="height" :show-feedback="false">
            <n-slider v-model:value="settingForm.qrcode.y" @dragend="qrcodePositionY"/>
          </n-form-item>
        </n-form>
        <n-space style="float: right">
          <n-button @click="resetSettings">初始化</n-button>
          <n-button type="primary" @click="handleSubmit">保存</n-button>
        </n-space>
      </n-card>
    </n-gi>
    <n-gi :span="3">
      <phones :title="settingForm.title">
        <div
            :style="settingForm.is_full==0?{display:'flex',justifyContent:'center',alignItems:'center',height:'100%'}:{height:'100%'}">
          <div ref="pages" class="pages" v-if="settingForm.is_full"
               :style="{backgroundImage: 'url(' + Config.VIEW_FILE + settingForm.poster + ')',height:'100%',margin:'auto'}">
            <div class="qr-codes"
                 :style="{width:settingForm.qrcode.width+'px',height:settingForm.qrcode.height+'px',left:settingForm.qrcode.left+'%',top:settingForm.qrcode.top+'%',borderRadius:settingForm.qrcode.border_top_left+'px  '+settingForm.qrcode.border_top_right+'px '+settingForm.qrcode.border_bottom_right+'px '+settingForm.qrcode.border_bottom_left+'px'}"></div>
          </div>
          <div ref="pages" class="pages" v-else
               :style="{backgroundImage: 'url(' + Config.VIEW_FILE + settingForm.poster + ')',width:settingForm.width+'px',height:settingForm.height+'px',borderRadius:settingForm.border_top_left+'px  '+settingForm.border_top_right+'px '+settingForm.border_bottom_right+'px '+settingForm.border_bottom_left+'px',border:'1px solid'}">
            <div class="qr-codes"
                 :style="{width:settingForm.qrcode.width+'px',height:settingForm.qrcode.height+'px',left:settingForm.qrcode.left+'%',top:settingForm.qrcode.top+'%',borderRadius:settingForm.qrcode.border_top_left+'px  '+settingForm.qrcode.border_top_right+'px '+settingForm.qrcode.border_bottom_right+'px '+settingForm.qrcode.border_bottom_left+'px'}"></div>
          </div>
        </div>

      </phones>
    </n-gi>
  </n-grid>
  <!-- 选择图片 -->
  <img-content v-model:show="showImgContent" @update:select="selectedImg"/>
</template>

<style scoped lang="scss">
.pages {
  background-size: cover;
  position: relative;
}

.qr-codes {
  position: relative;
  background-image: url("@/assets/img/gh_2145f2e20d13_344.jpg");
  background-size: cover;
}

.input-numbers {
  display: flex;
  justify-content: space-between;
  padding-left: 5px;

  &-input {
    width: 150px;

  }
}

:deep(.n-form-item .n-form-item-blank) {
  display: unset !important;
}
</style>